import React, {useState} from 'react';
import styled from 'styled-components';

const Tab = styled.ul`
  padding: 14px 16px;
  background: #fff;
  display: flex;
  justify-content: center;;
  align-items: center;
  font-size: 18px;
  line-height: 20px;
  > li{
    display: inline-block;
    margin: 0 16px;
    padding-bottom: 4px;
    padding-top: 2px;
    position: relative;
    &.selected::after{
      content:'';
      width: 100%;
      border-bottom: 2px solid steelblue;
      position: absolute;
      bottom:0;
      left:0;
    }
  }
`;
type Props = {
  value: string;
  onClick: (newValue: string) => void;
}
const TopTab: React.FC<Props> = (props) => {
  const tabMap = {'account': '账目', 'trends': '趋势'};
  const [tabList] = useState<(keyof typeof tabMap)[]>(['account', 'trends']);
  return (
    <Tab>
      {tabList.map((tab) =>
        (<li key={tab} className={props.value === tab ? 'selected' : undefined}
             onClick={() => props.onClick(tab)}>
          {tabMap[tab]}
        </li>))}
    </Tab>
  );
};

export {TopTab};